<template>
  <!-- 轮播图 -->
    <div class="swiper w100p rel">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="black"
        :loop="true"
        @change="onchange"
      >
        <van-swipe-item v-for="img in imgList" :key="img" style="height: 350px;">
          <img :src="img" alt="" class="w100p" style="height: 350px;"/>
          <!-- 自定义指示器 
          <div class="custom-indicator abs" :style="indicatorStyle">
          {{ current + 1 }} / {{ imgList.length }}
        </div>-->
        </van-swipe-item>
       <template #indicator>
          <div class="custom-indicator abs">{{ current + 1 }} / {{ imgList.length }}</div>
        </template>
      </van-swipe>
 
      <!--<span class="abs bg-fff number">{{ activeIndex }}</span>-->
    </div>
</template>

<script>
export default {
  props: ['imgList'],

    data() {
    return {
      current: 0,
      indicatorStyle: {
        bottom: '10px', // 距离底部的距离
        right: '10px', // 距离右侧的距离
        backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景
        color: '#fff', // 文字颜色
        padding: '1px', // 内边距
        borderRadius: '5px', // 圆角
      },
      /*imgList: [
        "https://mall.s.maizuo.com/c8ae4728163788cda4147e1ed8c44409.png",
        "https://mall.s.maizuo.com/817f9109dc9ea584eb96e3103e4ca689.png",
        "https://mall.s.maizuo.com/06bb24902a32b897079a5df7689e874e.png",
        "https://mall.s.maizuo.com/0662cad013821c8e076ba7a98b2534d5.png",
        "https://mall.s.maizuo.com/4b6cd4ea57ec56cc2e7dfe50b8a7fa5e.png",
      ],
      activeIndex: 1,*/
    };
  },
  methods: {
    onchange(index) {
      //this.activeIndex = index + 1;
      this.current = index;
    },
  },
};

</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  height: 350px;
  color: #fff;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  img {
    height: 350px;
  }
}

.custom-indicator {
  position: absolute;
  border: 1px solid gray;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
  width: 45px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
</style>